<div class="modal fade in ip-box" tabindex="-1" role="dialog" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true"id="add">
    <div class="modal-dialog modal-lg-f modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">角色组管理 — 新增</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">
                <div class="container">
                    <form #newlyAddedForm="ngForm" name="userAdd_form" novalidate>
                        <div class="overflow-hide form-group row">
                            <label class="col-xs-12 col-sm-3 control-label text-right">角色组名称：</label>
                            <div class="col-xs-12 col-sm-9">
                                <input type="text" name="roleGroupName" class="form-control" [(ngModel)]="rolesadd.roleGroupName" placeholder="输入角色组名称" forbiddenName="bob"
                                    minlength="1" maxlength="20" #roleGroupName="ngModel" required />
                                <!-- [(ngModel)]="rolesadde.roleGroupName" -->
                                <label class="red required">*</label>
                                <!-- <div class="error" ng-show="userAdd_form.roleGroupName.$dirty && userAdd_form.roleGroupName.$invalid">
                                <small class="error" ng-show="userAdd_form.roleGroupName.$error.required">请输入角色组名</small>
                                <small class="error" ng-show="userAdd_form.roleGroupName.$error.minlength">角色组名长度在2-20之间</small>
                                <small class="error" ng-show=" userAdd_form.roleGroupName.$error.maxlength">角色组名长度在2-20之间</small>
                            </div> -->
                                <!-- <div *ngIf="rolesadd.roleGroupName.length === 20">
                                    <small class="error"> 角色组名长度不能大于20</small>
                                </div> -->
                                <div *ngIf="roleGroupName.invalid && (roleGroupName.touched)" class="error-alert">
                                    <div *ngIf="roleGroupName.errors.required">
                                        <small class="error">请输入角色组名</small>
                                    </div>
                                    <div *ngIf="roleGroupName.errors.minlength || roleGroupName.errors.maxlength">
                                        <small class="error"> 角色组名长度在1-20之间</small>
                                    </div>
                                    
                                    <div *ngIf="roleGroupName.errors.forbiddenName">
                                        <small class="error"> Name cannot be Bob.</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group height-auto row">
                            <label class="col-xs-12 col-sm-3 control-label text-right">描述：</label>
                            <div class="col-xs-12 col-sm-9">
                                <textarea rows="5" type="text" placeholder="描述" name="description" #description=ngModel class="form-control" placeholder="描述长度在0-50个汉字之间"
                                minlength="0" maxlength="50" [(ngModel)]="rolesadd.description"></textarea>
                                <!-- {{[(ngModel)]="rolesadde.description"}} -->
                                <div *ngIf="description.invalid" class="error-alert text-left">
                                    <div *ngIf="description.errors.minlength || description.errors.maxlength">
                                        <small class="error "> 描述长度在0-50之间</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="clearfix"></div>
                </div>
            </div>
            <div class="modal-footer modal-footer-30">
                <button type="button" class="btn btn-default" mat-raised-button  (click)="reset()">取消</button>
                <button type="button" class="btn btn-primary" mat-button   [disabled]="roleGroupName.invalid" (click)="submitAdd()"><span class="glyphicon glyphicon-plus"></span> 新增</button>
                
                
            </div>
            <!-- 新增内容 END -->
        </div>
    </div>
</div>